<!--
 * @Author: Logan  Mail: admin@attacker.club
 * @Date: 2022-06-27 11:35:13
 * @LastEditTime: 2022-06-27 14:28:59
 * @Description: 
-->
<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div style="background: #42b983">1</div>
    </el-col>
    <el-col :span="6">
      <div style="background: orange">2</div>
    </el-col>
    <el-col :span="6">
      <div style="background: green">3</div>
    </el-col>
    <el-col :span="6">
      <div style="background: aquamarine">4</div>
    </el-col>
  </el-row>
  <br />
  <el-row :gutter="20">
    <el-col :span="10">
      <div style="background: #42b983">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>标题</span>
            </div>
          </template>
          <div>卡片内容</div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="10">
      <div style="background: orange">2</div>
    </el-col>
    <el-col :span="4">
      <div style="background: green">3</div>
    </el-col>
  </el-row>

  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>标题</span>
      </div>
    </template>
    <div>卡片内容</div>
  </el-card>
</template>

<script>
export default {
  name: "vueA",
};
</script>

<style scoped></style>
